<template>
	<view class="container">
		<view>
			<view class="header-wrap">
				<view class="logo-wrap">
					<image class="logo" src="../static/img/logo.png" mode="widthFix"></image>
				</view>
				<view class="title-wrap">
					<image class="title" src="../static/img/title.png" mode="widthFix"></image>
					<view class="text">关心互联，扶助有道</view>
				</view>
			</view>
			
			<view class="form">
				<!-- 登录 -->
				<view class="row">
					<view class="label">姓名：</view>
					<input class="input" v-model="form.name" placeholder="请输入姓名" prefixIcon="account-fill" type="text" border="surround"/>
				</view>
				<view class="row">
					<view class="label">身份证号：</view>
					<view class="input">
						<input class="input-text" v-if="showPassword" type="text" v-model="form.idNumber" placeholder="请输入身份证号" prefixIcon="account-fill" border="surround"/>
						<input class="input-text" v-else type="password" v-model="form.idNumber" placeholder="请输入身份证号" prefixIcon="account-fill" border="surround"/>
						<view class="input-icon">
							<uni-icons v-if="showPassword" type="eye-slash" size="21" color="#999999" @click="changePassword(false)"></uni-icons>
							<uni-icons v-else type="eye" size="21" color="#999999" @click="changePassword(true)"></uni-icons>
						</view>
					</view>
				</view>
				<view class="setting-wrap">
					<view class="agree">
						<checkbox-group @change="rememberChange">
						<label>
							<checkbox value="cb" :checked="remember"  color="#FF7B00" style="transform:scale(0.7)" />
							<text class="link">记住账号</text>
						</label>
						</checkbox-group>
					</view>
					<view class="agree">
						<text class="link" @click="viewAgreement">服务隐私协议</text>
					</view>
				</view>
				<!-- 登录按钮 -->
				<view class="button-wrap">
					<button class="button" :disabled="logining" open-type="getUserProfile" @click="login()">登录</button>
				</view>
				<view class="staff-login">
					<text class="link" @click="staffLogin">服务人员登陆</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ApiLogin from "@/api/login.js"
	import Store from '@/store/index.js';
	
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				form:{
					name: null,
					idNumber: ''
				},
				logining: false,
				remember: true,
				loginType: '',
				phone: '',
				userName: "",
				avatarUrl: "",
				nickName: "",
				userType: "",
				wxId: "",
				userInfo: {},
				code: '', //微信临时登录凭证
				showPassword: false,
				agreement: false,
				loginActive: false,			//已点登陆标志
				remember: true				//记住账号
			}
		},
		created() {
			let name = Store.getName();
			let idNumber = Store.getIdNumber();
			if(name){
				this.form.name = name;
			} else{
				this.form.name = '';
			}
			if(idNumber){
				this.form.idNumber = idNumber;
			}else{
				this.form.idNumber = '';
			}
		},
		watch:{
			// remember: function(newValue, oldValue){
			// 	if(!newValue){
			// 		Store.clearPassword();
			// 	}
			// }
		},
		onShow() {
			this.agreement = uni.getStorageSync('agreement');
			this.loginActive = uni.getStorageSync('loginActive');
			//只用同意一次，下次不用再同意
			// uni.removeStorageSync('agreement');
			uni.removeStorageSync('loginActive');
			if(this.agreement && this.loginActive){
				this.login();
			}
		},
		methods: {
			...mapMutations(['login']),
			navBack() {
				uni.navigateBack();
			},
			
			changePassword(val){
				this.showPassword = val;
				this.$forceUpdate();
			},
			
			wxLogin() {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// 获取用户信息
						uni.request({
							url: config.baseUrl + '/app/getInfo/' + loginRes.code,
							method: "GET",
							success(res) {
								let json = res.data.msg;
								let data = JSON.parse(json);
								let openId = data.openid;
								wx.getUserInfo({
									success(wxUserInfo) {
										uni.setStorageSync('wxUserInfo', wxUserInfo);
									}
								})
							}
						})
					}
				});
			},
			
			rememberChange(evt){
				if(evt.detail.value && evt.detail.value.length>0){
					//选中
					this.remember = true;
				} else {
					//未选中
					this.remember = false;
					Store.clearName();
					Store.clearIdNumber();
				}
			},
			
			/* 点击登录 */
			login: function() {
				this.loginActive = true;
				if(!this.agreement){
					uni.showModal({
						title: '提示',
						content: '请点击查看并同意《服务隐私协议》',
						showCancel: false,
						complete() {}
					})
				}else{
					this.logining = true;
					let that = this;
					// that.wxLogin();
					if (!this.form.name || this.form.name.length == 0) {
						this.logining = false;
						uni.showToast({
							icon: 'none',
							title: '请输入姓名!',
							duration: 2000,
						})
						return;
					} 
					if (!this.form.idNumber || this.form.idNumber.length == 0) {
						this.logining = false;
						uni.showToast({
							icon: 'none',
							title: '请输入身份证号!',
							duration: 2000,
						})
						return;
					}
					
					//向后台发送请求
					ApiLogin.login('people_'+this.form.idNumber, this.form.name).then(res=>{
						if (res.code == 200) {
							if(res.token && res.token != ''){
								//记住账号
								if(that.remember){	
									Store.setName(that.form.name);
									Store.setIdNumber(that.form.idNumber);
								} else {
									Store.clearName();
									Store.clearIdNumber();
								}
								//
								ApiLogin.getInfo().then(infoRes =>{
									uni.showToast({
										title: '登录成功',
										mask: true
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}, 1500)
								});
							} else {
								this.logining = false;
								uni.showToast({
									icon: 'none',
									title: 'Token错误',
									duration: 2000,
								})
							}
						} else if (res.code == 10002) {
							this.logining = false;
							uni.showToast({
								icon: 'none',
								title: '信息错误',
								duration: 2000,
							})
						} else {
							this.logining = false;
							uni.showToast({
								icon: 'none',
								title: '用户不存在',
								duration: 2000,
							})
						}
					}).catch(err=>{
						console.log(err)
						this.logining = false;
						uni.showToast({
							icon: 'none',
							title: err.code == 500?'信息错误':'登录错误',
							duration: 2000,
						})
					})
				}
			},
			
			staffLogin(){
				uni.navigateTo({
					url: '/pages/login-staff'
				})
			},
			
			viewAgreement(){
				uni.navigateTo({
					url: '/pages/agreement?loginActive'+this.loginActive
				})
			},
		},

	}
</script>

<style>
	page {
		background: #fff;
	}

	.container {
		display: flex;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: #fff;
		box-sizing: border-box;
	}
	
	.header-wrap {
		display: flex;
		justify-content: center;
	}
	.logo{
		width: 180upx;
		margin-right: 30upx;
		
	}
	.title-wrap{
		
	}
	.title-wrap .title{
		width: 340upx;
		
	}
	.title-wrap .text{
		font-size: 16px;
		color: #FF7B00;
		margin-top: 10upx;
	}
	.form{
		width: 750upx;
		padding: 40upx;
		box-sizing: border-box;
		margin-top: 100upx;
	}
	.form .row{
		margin-bottom: 30upx;
	}
	.form .row .label{
		margin-bottom: 15upx;
	}
	.form .row .input{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15upx 20upx;
		border: 1upx solid #DCDCDC;
	}
	.form .row .input .input-text{
		flex-grow: 2;
	}
	.form .row .input .input-icon{
		width: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.form .button-wrap{
		padding-top: 10upx;
	}
	.form .button{
		color: white;
		background: linear-gradient(to bottom, #FF8218, #FFAA00 );
	}
	.staff-login{
		width: 100%;
		margin-top: 30upx;
		display: flex;
		justify-content: flex-end;
	}
	.staff-login .link{
		text-decoration: underline;
		color: #FF7B00;
	}
	.setting-wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.agree{
		margin-bottom: 10upx;
	}
	.agree .link{
		text-decoration: underline;
	}

</style>
